<template>
      <!-- 如果需要操作dom则用ref属性代替id -->
      <!-- <div ref="title"></div> -->
  <div class="container">
        <div class="alert alert-danger alert-dismissible fade show text-center"  ref="message">
          <strong>错误!</strong> {{error}}
        </div>
          <div class="col-md-4 col-md-offset-4 login">
            <div class="border rounded" style="padding: 20px; background-color: rgb(249, 249, 249);">
              <div class="text-center">欢迎来到活图网！</div>
              <form class="login">
                  <div class="form-group">
                    <label for="username">账号：</label>
                    <input type="text" class="form-control" id="username" v-model="username">
                  </div>
                  <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" class="form-control" id="password" v-model="password">
                  </div>
                  <div class="container">
                    <button type="button" ref="btn_login" class="btn btn-primary" style="width: 45%;margin-right: 10px;" v-on:click="login">登录</button>
                    <button type="button" ref="btn_regest" class="btn btn-primary" style="width: 45%;margin-left: 10px;;" v-on:click="regest">注册</button>
                  </div>
                </form>
            </div>
          </div>
  </div>
</template>
  
<script>
  import axios from 'axios';

  export default{
    data() {
      return {
        username: '',
        password: '',
        error:'',
      }
    },
    mounted(){

      // block 标签正常显示
      this.$refs.message.style.display='none';

      },
    methods: {
      login() {
        let self = this; // 保存this
        // 校验密码账号字段是否为空
        if(this.username=="" || this.password==""){ 
          this.error="账号和密码不能为空";
          this.$refs.message.style.display = 'block';
          self.$refs.btn_regest.disabled=true;
          this.$refs.btn_login.disabled=true;
          self.is_show();
          return
        }
        // 在这里编写登录逻辑
        axios.post('http://127.0.0.1:80/login/', {
          userid: this.username, 
          passwd: this.password    
        })
        .then(function (response) {
          if(response.data.code===100){
            let token = response.data.token
            localStorage.setItem("token",token);
            localStorage.setItem("user",self.username);
            console.log(response);
            console.log(response.data.code);
            self.$router.push("/zhuye")
          }
          else{
			      self.error = response.data.error;
          	self.$refs.message.style.display = 'block';
          	self.is_show();
          }
        })
        .catch(function (error) {
          self.error = error.message;
          self.$refs.message.style.display = 'block';
          self.is_show();
        });
      },
      regest(){
        this.$router.push("/regest")
      },
      is_show: function() {
       
        setTimeout(() => {
          this.$refs.message.style.display = 'none';
        }, 2000);
        setTimeout(() => {
          this.$refs.btn_regest.disabled=false;
          this.$refs.btn_login.disabled=false;
        }, 2000);
        
      }
    }
  }
  </script>

<style scoped>
  .login{
   
    margin: auto;
    margin-top: 10%;

  }
</style>